<template>
<div class="footer">
      <div class="footer-flex">
        <div class="footer-left">
          <span>联系我们</span>
          <span>全国热线</span>
          <strong>400-860-1420</strong>
          <span>商务合作</span>
          <strong>asdw@gutou.com</strong>
        </div>

        <div class="footer-center">
          <span>关注我们</span>
          <img
            class="wechat-hover"
            src="http://viptail.image.alimmdn.com/files/official_web/img/wechat.png"
          />
          <img src="../assets/imgs/wechat.jpg" class="wechat-img" />
          <a target="_blank" href="https://weibo.com/viptail"
            ><img
              src="http://viptail.image.alimmdn.com/files/official_web/img/weibo.png"
          /></a>
        </div>

        <div class="footer-right">
          <span>下载APP</span>
          <img
            src="http://viptail.image.alimmdn.com/files/official_web/img/download.png"
          />
          <h2 class="h2-top">iOS下载</h2>
          <h2>Android下载</h2>
        </div>
      </div>

      <ul>
        <li>
          <a
            target="_blank"
            href="http://www.viptail.epet.com/show/orgin/index.html"
            >关于我们</a
          >
        </li>
        |
        <li>
          <a
            target="_blank"
            href="http://www.viptail.epet.com/files/assurance/index.html"
            >保障服务</a
          >
        </li>
        |
        <li><a target="_blank" href="http://url.cn/5sYxSrg">创业初衷</a></li>
        |
        <li>
          <a target="_blank" href="http://petilives.com/apply_family.html"
            >寄养家庭</a
          >
        </li>
        |
        <li>
          <a target="_blank" href="http://petilives.com/guide.html">宠物指南</a>
        </li>
        |
        <li>
          <a target="_blank" href="http://localhost:8080/help/helpCenter.html#/"
            >帮助中心</a
          >
        </li>
        |
        <li class="li-news">
          <a target="_blank" href="https://www.iyiou.com/p/20865">媒体报道</a>
        </li>
      </ul>

    </div>
</template>
<style lang="scss" scoped>
.footer {
    h1 {
      font-size: 15px;
      text-align: center;
    }
    margin-top: 30px;
    background-color: #333;
    padding: 50px 220px;
    color: #ccc;
    ul {
      .li-news {
        position: relative;
      }
      li {
        a {
          color: #ccc;
          display: inline-block;
        }
        display: inline-block;
        padding: 0 25px;
        font-size: 20px;
      }
      margin: 30px 0;
      width: 100%;
      text-align: center;
    }
    .footer-flex {
      display: flex;
      margin: 0 auto;
      width: 1000px;
      .footer-right {
        position: relative;
        width: 300px;
        margin-left: 8%;
        h2 {
          display: inline-block;
          background-color: #fbc02d;
          color: #282828;
          border-radius: 6px;
          font-size: 16px;
          padding: 5px 0;
          width: 111px;
          text-align: center;
          position: absolute;
          right: 0;
          bottom: 10%;
        }
        .h2-top {
          right: 0;
          bottom: 35%;
        }
        img {
          width: 130px;
          margin: 15px 30px 15px 15px;
          text-align: left;
        }
        span {
          display: block;
          font-size: 15px;
          margin: 0 0 10px 10px;
        }
      }
      .footer-center {
        .wechat-hover:hover + .wechat-img {
          display: block;
        }
        position: relative;
        margin-right: 80px;
        a {
          color: #2d8cf0;
          background: 0 0;
          text-decoration: none;
          outline: 0;
          cursor: pointer;
          transition: color 0.2s ease;
        }
        .wechat-img {
          width: 130px;
          height: 130px;
          position: absolute;
          right: -130px;
          margin: 0;
          top: 30px;
          display: none;
        }
        img {
          width: 46px;
          display: block;
          margin: 20px 0 20px 10px;
        }
        span {
          display: block;
          font-size: 15px;
          margin: 0 0 10px 10px;
        }
      }
      .footer-left {
        margin: 0 8%;
        strong {
          display: block;
          font-size: 15px;
          margin: 0 0 25px 10px;
          color: #fbc02d;
          font-size: 18px;
          font-weight: normal;
        }
        span {
          display: block;
          font-size: 15px;
          margin: 0 0 10px 10px;
        }
      }
    }
  }
</style>